<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Account Reputation | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Account Reputation" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Learn how to interpret account reputation." />
<meta property="og:description" content="Learn how to interpret account reputation." />
<link rel="canonical" href="account_reputation.html" />
<meta property="og:url" content="account_reputation.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"Learn how to interpret account reputation.","mainEntityOfPage":{"@type":"WebPage","@id":"account_reputation.html"},"@type":"BlogPosting","url":"account_reputation.html","headline":"JS: Account Reputation","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-account-reputation" class="row tutorials-javascript-account-reputation">
	<h3>
		<a id="tutorials-javascript-account-reputation">
			JS: Account Reputation
			
		</a>
	</h3>
	
		<span class="description"><p><em>Learn how to interpret account reputation.</em></p>
</span>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/20_account_reputation">Account Reputation</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a>.</span>
<br /></p>

<p>This tutorial runs on the main Steem blockchain. And accounts queried are real users with reputation.</p>

<h2 id="intro">Intro</h2>

<p>This tutorial will show the method of capturing a queried tag name and matching it to the Steem. We are using the <code class="highlighter-rouge">call</code> function provided by the <code class="highlighter-rouge">dsteem</code> library to pull accounts from the Steem blockchain. A simple HTML interface is used to both capture the string query as well as display the completed search.</p>

<h2 id="steps">steps</h2>

<ol>
  <li><a href="#app-setup"><strong>App setup</strong></a> Configuration of <code class="highlighter-rouge">dsteem</code> to use the proper connection and network.</li>
  <li><a href="#search-account"><strong>Search account</strong></a> Collecting the relevant search criteria</li>
  <li><a href="#run-reputation"><strong>Interpret account reputation</strong></a> Running the search and interpreting reputation.</li>
  <li><a href="#output"><strong>Output</strong></a> Displaying the results</li>
</ol>

<h4 id="1-app-setup-">1. App setup <a name="app-setup"></a></h4>

<p>Below we have <code class="highlighter-rouge">dsteem</code> pointing to the production network with the proper chainId, addressPrefix, and endpoint. There is a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of this tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">dsteem</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{};</span>
<span class="c1">//connect to production server</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">addressPrefix</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">STM</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">chainId</span> <span class="o">=</span>
    <span class="dl">'</span><span class="s1">0000000000000000000000000000000000000000000000000000000000000000</span><span class="dl">'</span><span class="p">;</span>
<span class="c1">//connect to server which is connected to the network/production</span>
<span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.steemit.com</span><span class="dl">'</span><span class="p">);</span>
</code></pre></div></div>

<h4 id="2-search-account-">2. Search account <a name="search-account"></a></h4>

<p>Collecting of the search criteria happens via an HTML input. The form can be found in the <code class="highlighter-rouge">index.html</code> file. The values are pulled from that screen with the below:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">max</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">submitAcc</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">accSearch</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
</code></pre></div></div>

<h4 id="3-interpret-account-reputation-">3. Interpret account reputation <a name="run-reputation"></a></h4>

<p>In order to get accounts, we run the search with the <code class="highlighter-rouge">search field</code> and <code class="highlighter-rouge">maximum</code> list items as parameters.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">_accounts</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="dl">'</span><span class="s1">lookup_accounts</span><span class="dl">'</span><span class="p">,[</span><span class="nx">accSearch</span><span class="p">,</span> <span class="nx">max</span><span class="p">]);</span>
</code></pre></div></div>

<p>The result of the search is an array of accounts. After that we use <code class="highlighter-rouge">get_accounts</code> to pull account data from Steem.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">acc</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="dl">'</span><span class="s1">get_accounts</span><span class="dl">'</span><span class="p">,[</span><span class="nx">_accounts</span><span class="p">]);</span>
</code></pre></div></div>

<p>And we loop through each account to convert their <code class="highlighter-rouge">reputation</code> to human readable format with following function:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">log10</span><span class="p">(</span><span class="nx">str</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">leadingDigits</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">4</span><span class="p">));</span>
    <span class="kd">const</span> <span class="nx">log</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">leadingDigits</span><span class="p">)</span> <span class="o">/</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">LN10</span> <span class="o">+</span> <span class="mf">0.00000001</span><span class="p">;</span>
    <span class="kd">const</span> <span class="nx">n</span> <span class="o">=</span> <span class="nx">str</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span>
    <span class="k">return</span> <span class="nx">n</span> <span class="o">+</span> <span class="p">(</span><span class="nx">log</span> <span class="o">-</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">log</span><span class="p">));</span>
<span class="p">}</span>

<span class="k">export</span> <span class="kd">const</span> <span class="nx">repLog10</span> <span class="o">=</span> <span class="nx">rep2</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">rep2</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="k">return</span> <span class="nx">rep2</span><span class="p">;</span>
    <span class="kd">let</span> <span class="nx">rep</span> <span class="o">=</span> <span class="nb">String</span><span class="p">(</span><span class="nx">rep2</span><span class="p">);</span>
    <span class="kd">const</span> <span class="nx">neg</span> <span class="o">=</span> <span class="nx">rep</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">-</span><span class="dl">'</span><span class="p">;</span>
    <span class="nx">rep</span> <span class="o">=</span> <span class="nx">neg</span> <span class="p">?</span> <span class="nx">rep</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="p">:</span> <span class="nx">rep</span><span class="p">;</span>

    <span class="kd">let</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">log10</span><span class="p">(</span><span class="nx">rep</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">out</span><span class="p">))</span> <span class="nx">out</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="nx">out</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">out</span> <span class="o">-</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// @ -9, $0.50 earned is approx magnitude 1</span>
    <span class="nx">out</span> <span class="o">=</span> <span class="p">(</span><span class="nx">neg</span> <span class="p">?</span> <span class="o">-</span><span class="mi">1</span> <span class="p">:</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="nx">out</span><span class="p">;</span>
    <span class="nx">out</span> <span class="o">=</span> <span class="nx">out</span> <span class="o">*</span> <span class="mi">9</span> <span class="o">+</span> <span class="mi">25</span><span class="p">;</span> <span class="c1">// 9 points per magnitude. center at 25</span>
    <span class="c1">// base-line 0 to darken and &lt; 0 to auto hide (grep rephide)</span>
    <span class="nx">out</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
    <span class="k">return</span> <span class="nx">out</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>

<h4 id="4-output-">4. Output <a name="output"></a></h4>

<p>After each account’s reputation is interpreted we can then display them on screen with readable reputation.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//disply list of account names and reputation with line breaks</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">_accounts</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">_accounts</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">_accounts</span><span class="p">[</span><span class="nx">i</span><span class="p">]}</span><span class="s2"> - </span><span class="p">${</span><span class="nx">repLog10</span><span class="p">(</span><span class="nx">acc</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">reputation</span><span class="p">)}</span><span class="s2">`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">accList</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">_accounts</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">'</span><span class="s1">&lt;br/&gt;</span><span class="dl">'</span><span class="p">);</span>
</code></pre></div></div>

<p>That’s it!</p>

<h3 id="to-run-this-tutorial">To run this tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/20_account_reputation</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

<hr />

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

